<template>
	<view>
		<zmm-watermark :watermark="userStore.watermark" v-if="userStore.watermark"></zmm-watermark>
		<view class="content detail">
			<!--优惠券-->
			<view class="detail-item">
				<uni-section title="个人营销预算" type="line"></uni-section>
				<view class="detail-content formRef">
					<uni-forms ref="formRef" :model="formData" :rules="formRules" labelWidth="80px">
					  <uni-forms-item label="预算年月" name="planMonth" required>
					    <uni-easyinput :disabled="!!id" v-model="formData.planMonth" placeholder="请输入预算年月(如：202509)" />
					  </uni-forms-item>
						<uni-forms-item label="区域" name="regionCode" required>
						  <uni-data-select
						  	v-model="formData.regionCode"
						  	placeholder="请选择区域"
								:disabled="!!id"
						  	:localdata="setStore.allProvinceList"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="用户姓名" name="userId" required>
					    <uni-data-select
					    	v-model="formData.userId"
					    	placeholder="请选择用户姓名"
								:disabled="!!id"
					    	:localdata="allSalesList"></uni-data-select>
					  </uni-forms-item>
					  <uni-forms-item label="预算金额" name="totalAmount" required>
					    <uni-easyinput type="number" v-model="formData.totalAmount" placeholder="请输入预算金额" />
					  </uni-forms-item>
						<uni-forms-item label="已用金额" name="usedAmount" required>
						  <uni-easyinput type="number" disabled v-model="formData.usedAmount" placeholder="请输入已用金额" />
						</uni-forms-item>
						<uni-forms-item label="过期金额" name="overdueAmount" required>
						  <uni-easyinput type="number" disabled v-model="formData.overdueAmount" placeholder="请输入过期金额" />
						</uni-forms-item>
						<uni-forms-item label="预算剩余" name="totalBalance" required>
						  <uni-easyinput type="number" disabled v-model="formData.totalBalance" placeholder="请输入预算剩余" />
						</uni-forms-item>
					  <uni-forms-item label="可用金额" name="usableAmount" required>
					    <uni-easyinput type="number" v-model="formData.usableAmount" placeholder="请输入可用金额" />
					  </uni-forms-item>
					  <uni-forms-item label="备注" name="remark">
					    <uni-easyinput type="textarea" v-model="formData.remark" placeholder="请输入备注" />
					  </uni-forms-item>
					</uni-forms>
					<button type="primary" :disabled="isSubmit" :loading="isSubmit" @click="submit">提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, onMounted, ref } from 'vue';
import { tab, auth, modal } from "@/plugins"
import { getTitle } from "@/utils/getter"
import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
import useUserStore from '@/store/modules/user'
import { marketPlanPersonEdit, marketPlanPersonDetail } from "@/api/erp_api/coupon"
import { getUserAllSales } from "@/api/system/user"
import useSetStore from '@/store/modules/set';

	const userStore = useUserStore()
	const setStore = useSetStore()
	const id = ref('')
	onLoad((option) => {
		getAllSales()
		if (option.id) {
			uni.setNavigationBarTitle({
				title: '修改个人营销预算'
			})
			id.value = option.id
			getDetail()
		} else {
			uni.setNavigationBarTitle({
				title: '添加个人营销预算'
			})
		}
	})
	
	// 销售
	const allSalesList = ref([])
	const getAllSales = () => {
		return getUserAllSales().then(res => {
			allSalesList.value = res.data.map(item => {
				return {
					...item,
					value: item.userId,
					text: `${item.nickName}(${item.userName})`
				}
			}) || []
		})
	}
	
	// 获取详情
	const info = ref({})
	const isLoading = ref(false)
	const getDetail = () => {
		const params = {
			id: id.value
		}
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		marketPlanPersonDetail(params).then(res => {
			info.value = res.data || {}
			formData.value = {
				userId: res.data.userId,
				nickName: res.data.nickName,
				planMonth: res.data.planMonth,
				regionCode: res.data.regionCode,
				totalAmount: res.data.totalAmount,
				usedAmount:  res.data.usedAmount,
				overdueAmount: res.data.overdueAmount,
				totalBalance: res.data.totalBalance,
				usableAmount: res.data.usableAmount,
				remark: res.data.remark
			}
			isLoading.value = false
			uni.hideLoading()
	  }).catch(() => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
	// form表单数据
	const formData = ref({
		userId: '',
		nickName: '',
		planMonth: '',
		regionCode: userStore.regionCode,
		totalAmount: '',
		usedAmount:  0,
		overdueAmount: 0,
		totalBalance: 0,
		usableAmount: 10,
		remark: ''
	})
	const formRef = ref(null)
	const formRules = ref({
		userId: {
			rules: [{ required: true, errorMessage: '请选择用户姓名' }]
		},
		regionCode: {
			rules: [{ required: true, errorMessage: '请选择区域' }]
		},
		planMonth: {
			rules: [{ required: true, errorMessage: '请输入预算年月' }]
		},
		totalAmount: {
			rules: [{ required: true, errorMessage: '请输入预算金额' }]
		},
		usableAmount: {
			rules: [{ required: true, errorMessage: '请选择可用金额' }]
		}
	})
	const isSubmit = ref(false)
	// 提交
	const submit = () => {
		formRef.value.validate().then(formRes => {
			isSubmit.value = true
			const params = { ...formData.value }
			if (id.value) {
				params.id = id.value
			}
			marketPlanPersonEdit(params).then(async (res) => {
				modal.showToast(res.msg)
				await uni.$u.sleep(1000)
				isSubmit.value = false
				uni.$emit('refreshList');  // 触发刷新事件
				uni.navigateBack({
					delta: 1
				})
			}).catch(err => {
				isSubmit.value = false
			})
		})
	}
	// 清空
	const clear = () => {
		formData.value = {
			userId: '',
			nickName: '',
			planMonth: '',
			regionCode: '',
			totalAmount: '',
			usedAmount:  '',
			overdueAmount: '',
			totalBalance: '',
			usableAmount: '',
			remark: ''
		}
	}
</script>

<style scoped lang="scss">
	.search {
		margin-top: 0;
	}
</style>
